<template>
  <div class="B">
    <div class="left">
      <span v-if="nameShow">用户名：
        <input type="text" v-model="username"></span>
      <span v-else>用户名：{{username}}</span>
      <span class="showClass" v-show="showRegular">用户名必须是6~18位数字，字母，下划线。</span>

      <br>
      <br>
      <br>
      <button @click="login">{{loginTxt}}</button>
    </div>
    <div class="rigth">
      <div class="kong" v-show="heiShow"></div>
      <div v-if="isisis">
        <div v-for="(item,index) in data" :key="index" v-show="currentIndex==index">
          <h2>{{item.title}}</h2>
          <div class="options" v-for="(item1,index1) in item.options" :key="index1">
            <input type="radio" :value="index1" v-model="keyValues"><span>{{item1}}</span>
          </div>
          <button @click="submitKey" :disabled="dis">{{submitKeyTxt}}</button>
          <div v-show="isShow">{{num}}s进入下一题</div>
          <div>

          </div>
        </div>
      </div>
      <div v-else>
        没题啦！！<button @click="zaiai">再做一遍</button>
      </div>
      <div class="floor">
        共有<span>{{thenAnswer}}</span>/<span>{{data.length}}</span>道题，答对：<span>{{face}}</span>，答错：<span>{{wrong}}</span>
      </div>
    </div>
  </div>
</template>

<script>
import data from "@/assets/data1.json";
export default {
  name: "B",
  data() {
    return {
      data: data.data,
      loginTxt: "登录",
      showRegular: false, //正则验证显示隐藏
      username: "", //用户名
      nameShow: true, //用户名登录成功后显示
      keyValues: -1, //点击答案时的v-model
      currentIndex: 0,
      heiShow: true, //黑屏
      thenAnswer: 1, //答题的道数
      face: 0, //对
      wrong: 0, //错
      dis: false, //提交答案的禁用
      submitKeyTxt: "提交按钮",
      num: 3,
      isShow: false, //隐藏倒计时
      isisis: true,
    };
  },
  methods: {
    // 登录
    login() {
      if (this.loginTxt == "登录") {
        let reg = /^\w{6,16}/g;
        let flag = reg.test(this.username);
        if (flag) {
          this.loginTxt = "退出";
          this.showRegular = false;
          this.heiShow = false;
          this.nameShow = false;
        } else {
          this.showRegular = true;
        }
      } else if (this.loginTxt == "退出") {
        this.loginTxt = "登录";
        this.heiShow = true;
        this.nameShow = true;
        this.username = "";
        this.face = 0;
        this.wrong = 0;
        this.isisis = true;
        this.thenAnswer = 1;
        this.currentIndex = 0;
      }
    },
    // 提交答案
    submitKey() {
      if (this.data[this.currentIndex].right == this.keyValues) {
        this.face++;
        this.submitKeyTxt = "回答正确";
      } else {
        this.wrong++;
        this.submitKeyTxt = "回答错误";
      }
      this.dis = true;
      this.isShow = true;
      let item = setInterval(() => {
        this.num--;
        if (this.num == 0) {
          this.currentIndex++;
          this.dis = false;
          this.submitKeyTxt = "提交按钮";
          this.thenAnswer++;
          this.isShow = false;
          this.num = 3;
          this.keyValues = -1;
          clearInterval(item);
          if (this.currentIndex == this.data.length) {
            this.isisis = false;
          }
        }
      }, 1000);
    },
    // 再做一遍
    zaiai() {
      this.face = 0;
      this.wrong = 0;
      this.isisis = true;
      this.thenAnswer = 1;
      this.currentIndex = 0;
    },
  },
};
</script>

<style lang="scss" scoped>
.B {
  width: 90%;
  display: flex;
  border: solid #ccc 1px;
  margin: 20px auto;
  .left {
    width: 45%;
    height: 400px;
    border-right: solid #ccc 1px;
    padding: 20px;
    .showClass {
      color: red;
      margin-left: 8px;
    }
  }
  .rigth {
    width: 65%;
    height: 400px;
    padding: 20px;
    position: relative;
    .kong {
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.9);
      position: absolute;
      top: 0;
      left: 0;
    }
    .options {
      padding: 8px;
    }
  }
  .floor {
    position: absolute;
    bottom: 30px;
  }
}
</style>